<template>
  <!-- <AlphaColor v-model="detail.themeColor" name="Tab背景色" @change="onChange" /> -->
  <Color v-model="detail.tabSelectColor" name="Tab选中颜色" @change="onChange" />
  <Color v-model="detail.tabUnSelectColor" name="Tab未选中颜色" @change="onChange" />
  <AlphaColor v-model="detail.goodsBgColor" name="商品组背景色" @change="onChange" />
  <Color v-model="detail.timeTextcolor" name="倒计时文字色" @change="onChange" />
  <Color v-model="detail.timeCountDownColor" name="倒计时数字颜色" @change="onChange" />
  <Color v-model="detail.timeCountDownBgColor" name="倒计时背景颜色" @change="onChange" />
  <Slider v-model="detail.borderRadius" name="圆角" :max="200" @change="onChange" />
  <OImage v-model="detail.goodsCoverImg" v-model:size="detail.goodsImgSize" name="商品封面" @change="onChange" />
  <Color v-model="detail.goodsNameColor" name="商品名称颜色" @change="onChange" />
  <Color v-model="detail.progressColor" name="进度条颜色" @change="onChange" />
  <Color v-model="detail.seckillPriceColor" name="秒杀价格颜色" @change="onChange" />
  <OImage v-model="detail.snapUpBtnImg" v-model:size="detail.btnSize" name="立即抢购按钮" @change="onChange" />
  <OImage v-model="detail.notBeginBtnImg" v-model:size="detail.btnSize" name="未开始按钮" @change="onChange" />
  <OImage v-model="detail.stockOutBtnImg" v-model:size="detail.btnSize" name="已抢光按钮" @change="onChange" />
  <OImage v-model="detail.endBtnImg" v-model:size="detail.btnSize" name="已结束按钮" @change="onChange" />
</template>

<script setup>
import { newRandomUid } from "@/utils";
import OImage from "../setting/Images.vue";
import AlphaColor from "../setting/AlphaColor.vue";
import Color from "../setting/Color.vue";
import Slider from "../setting/Slider.vue";

import ipadCover from '@/assets/seckill/ipad.jpeg';
import seckillQg from '@/assets/seckill/seckill_qg.jpg';
import seckillWks from '@/assets/seckill/seckill_wks.jpg';
import seckillYqg from '@/assets/seckill/seckill_yqg.jpg';
import seckillYjs from '@/assets/seckill/seckill_yjs.png';

// props
const props = defineProps({
  config: {
    type: Object,
    required: true
  },
  name: {
    type: String,
    default: '',
  }
})

// DATA
const pageConfig = inject('pageConfig', []);
const form = ref({
  // tab
  $position: { top: 0, left: 0 },
  $size: { width: 375, height: 360 },
  $positionType: "relative",
  $removeable: true,
  bgShow: true,
  themeColor: '#409eff',
  tabSelectColor: '#409eff',
  tabUnSelectColor: '#000000',
  timeTextcolor: '#000000',
  timeCountDownBgColor: "#ee0a24",
  timeCountDownColor: "#ffffff",
  // goods
  goodsBgColor: "#FFFFFF",
  borderRadius: 4,
  goodsCoverImg: ipadCover,
  goodsImgSize: { width: 60, height: 60 },
  goodsNameColor: '#000000',
  progressColor: '#409eff',
  seckillPriceColor: 'red',
  btnSize: { width: 60, height: 20 },
  snapUpBtnImg: seckillQg,
  notBeginBtnImg: seckillWks,
  stockOutBtnImg: seckillYqg,
  endBtnImg: seckillYjs
})

// ONMOUNTED
onMounted(() => {
  nextTick(() => {
    initConfig();
    onChange();
  });
});

// METHODS
const emits = defineEmits(['update:config', 'change']);

const onChange = (val) => {
  detail.value = detail.value;
};
const initConfig = () => {
  if (!detail.value.$pageFlag) {
    detail.value.$pageFlag = `Seckill-${newRandomUid()}`;
    // detail.value.seckillUid = newRandomUid();
    // emits("change", detail.value, {
    //   uid: detail.value.seckillUid,
    //   type: "Seckill",
    //   name: "秒杀",
    //   pageConfig: {
    //     $pageFlag: detail.value.$pageFlag,
    //   },
    // });
    onChange();
  }
};

// COMPUTED
const detail = computed({
  get: () => {
    console.log('props.config ++', props.config)
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
})

</script>